import { connect } from 'umi';
import { Button, Col, Form, Input, Row, Select } from 'antd';
import React, { useState, useEffect } from 'react';
import { getcategory } from '@/api/article'
const { Option } = Select;



const AdvancedSearchForm = () => {
  const [form] = Form.useForm();

  const getFields = () => {
    const children = [];

    children.push(
      <Col span={8} key={0}>

        <Form.Item label="标题" name="title">
          <Input placeholder="placeholder" />
        </Form.Item>
      </Col>,
      <Col span={8} key={1}>
        <Form.Item label="状态" name="status">

          <Select>
            <Option value="1">已发布</Option>
            <Option value="2">草稿</Option>
          </Select>
        </Form.Item>
      </Col>,
      <Col span={8} key={2}>

        <Form.Item label="分类" name="classify">
          <Select>
            <Option value="1">1</Option>
            <Option value="2">1234565</Option>
          </Select>
        </Form.Item>
      </Col>,
    );

    return children;
  };


  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      <Row gutter={24}>{getFields()}</Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
        </Col>
      </Row>
    </Form>
  );
};


function IndexPage(props: any) {
const [pageInfo,setPageInfo] = useState({ page: 1, pageSize: 8 })
  const AdvancedSearchForm = () => {
    const [classify, setClassify] = useState([])
    useEffect(() => {
      getcategory().then(({data})=>{
        let arr:any = [];
        data.forEach((item:any)=>{
          arr.push({
            label:item.label,
            value:item.id
          })
        })

        setClassify(arr)
        arr=null
      })
      .catch(err =>{
        console.log(err);

      })
    }, [])

    const [form] = Form.useForm();

    const getFields = () => {
      const children = [];

      children.push(
        <Col span={6} key={0}>
          <Form.Item
            label="标题"
            name="title"
          >
            <Input placeholder="请输入文章标题" />

          </Form.Item>

        </Col>,
        <Col span={6} key={1}>
          <Form.Item
            label="状态"
            name="status"
          >
            <Select>
              <Option key={1-1} value="publish">已发布</Option>
              <Option key={1-2} value="draft">草稿</Option>
            </Select>
          </Form.Item>
        </Col>,
        <Col span={6} key={2}>
          <Form.Item
            label="分类"
            name="category"
          >
            <Select>
              {
                classify.length>0 ? classify.map((item:any)=>{
                  return <Option key={item.value} value={item.value}>{item.label}</Option>
                }) : ''
              }

            </Select>

          </Form.Item>
        </Col>,
      )

      return children
    }

  const {dispatch} = props

    const onFinish = (values: any) => {
      console.log('Received values of form: ', values);
      dispatch({type: 'articleAll/INIT',pageInfo:{
        ...values,
        ...pageInfo
      }})
    };

    return (
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
        style={{ paddingTop: '20px' }}
      >
        <Row gutter={24}>{getFields()}</Row>
        <Row>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button
              style={{ margin: '0 8px' }}
              onClick={() => {
                form.resetFields();
              }}
            >
              重置
            </Button>
          </Col>
        </Row>
      </Form>
    );
  };


  return (
    <div style={{ background: '#fff', height: '130px' }}>
      <AdvancedSearchForm />

    </div>
  );
}
const mapStateToProps = (state: any) => {

  const { articleAll } = state;
  return articleAll;
};
export default connect(mapStateToProps)(IndexPage);

